<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!-- 宿舍区1号楼-->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼</div>
            </div>
          </div>
          <div class="item_content">
            <div class="w-100 h-100 d-flex align-items-center justify-content-between pt-3">
              <template v-for="(item,index) in oneCarData">
                <div v-if="index == 0" class="width-40 h-100 d-flex align-items-center item_bg_border" :key="index">
                  <div class="h-100 item_width item_bg_warning"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-between pl-3 pt-3 pb-2 pr-2">
                    <div class="font-white font-14">{{oneCarDataTitle[index]}}</div>
                    <div class="d-flex align-items-center justify-content-center">
                      <div class="font-white-impact font-36 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                      <div class="font-blue font-14 mt-3">kW</div>
                    </div>
                    <div>
                      <el-image class="image_size" :src="line_three" fit="cover"></el-image>
                    </div>
                  </div>
                </div>
                <div v-else class="width-20 h-100 item_bg_border" :key="index">
                  <div class="h-100 w-100 d-flex flex-column justify-content-between pt-3 pb-2 pl-2 pr-2">
                    <div class="font-white font-14">{{oneCarDataTitle[index]}}</div>
                    <div class="d-flex align-items-center justify-content-center">
                      <div class="font-white-impact font-36 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                      <div class="font-blue font-14 mt-3">kW</div>
                    </div>
                    <div>
                      <el-image class="image_size" :src="line_four" fit="cover"></el-image>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区1号楼 每层实时负载 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼每层实时负载</div>
            </div>
          </div>
          <div class="item_content">
            <div class="w-100 h-100 d-flex align-items-center justify-content-between pt-3">
              <div class="width-20 h-100 mr-3 clearLastMb" v-for="(item,index) in twoCardData" :key="index">
                <div class="h-100 w-100 d-flex flex-column justify-content-between item_bg_border pt-3 pb-2 pl-2 pr-2">
                  <div class="font-white font-14">{{index + 1}}层总负载</div>
                  <div class="d-flex align-items-center justify-content-center">
                    <div class="font-white-impact font-36 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-14 mt-3">kW</div>
                  </div>
                  <div>
                    <el-image class="image_size" :src="line_four" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 宿舍区1号楼 负载区域对比 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼负载区域对比</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 pt-3" id="bar-first"></div>
          </div>
        </div>
      </div>
      <!-- 宿舍区1号楼 负载类型分布 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼负载类型分布</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 pt-3" id="bar_second"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListLoadByNum,
    queryTwoListLoadByNum,
    queryThreeListLoadByReport,
    queryFourListLoadByReport,
  } from "@/api/electrician/oneBuilding/loadAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_four: require('@/assets/img/line_four.png'),
        line_three: require('@/assets/img/line_three.png'),

        timeout: [],

        oneCarData: [],
        oneCarDataTitle: ['总功率', '东区主开1', '东区主开2', '西区主开'],

        twoCardData: [],

        threeCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
        },

        fourCarData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
          seriesData4: [],
        }
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListLoadByNum()
      this.queryTwoListLoadByNum()
      this.queryThreeListLoadByReport()
      this.queryFourListLoadByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListLoadByNum()
        _this.queryTwoListLoadByNum()
        _this.queryThreeListLoadByReport()
        _this.queryFourListLoadByReport()
      }, 10000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListLoadByNum() {
        queryOneListLoadByNum().then(res => {
          let tempData = res.object || []
          let arr = [{
            deviceValue: '',
          }, {
            deviceValue: '',
          }, {
            deviceValue: '',
          }, {
            deviceValue: '',
          }]
          // console.log(parseFloat(tempData[0].deviceValue) + parseFloat(tempData[1].deviceValue)+parseFloat(tempData[2].deviceValue))
          // console.log(Number(tempData[0].deviceValue) + Number(tempData[1].deviceValue)+Number(tempData[2].deviceValue))
          arr[0].deviceValue = (Number(tempData[0].deviceValue) + Number(tempData[1].deviceValue) + Number(tempData[2].deviceValue)) == 0 ? '0.0' : (this.$formatNumber(tempData[0].deviceValue) + this.$formatNumber(tempData[1].deviceValue) + this.$formatNumber(tempData[2].deviceValue)).toFixed(2)
          arr[1].deviceValue = tempData[0].deviceValue
          arr[2].deviceValue = tempData[1].deviceValue
          arr[3].deviceValue = tempData[2].deviceValue
          this.oneCarData = arr
        })
      },
      queryTwoListLoadByNum() {
        queryTwoListLoadByNum().then(res => {
          let tempData = res.object || []
          this.twoCardData = tempData
        })
      },

      queryThreeListLoadByReport() {
        queryThreeListLoadByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber(arr[0]))
            seriesData2.push(this.$formatNumber(arr[1]))
          }

          this.threeCardData.xData = xData
          this.threeCardData.seriesData1 = seriesData1
          this.threeCardData.seriesData2 = seriesData2

          charts.barEchartOne('bar-first', this.threeCardData)
        })
      },
      queryFourListLoadByReport() {
        queryFourListLoadByReport().then(res => {
          let tempData = res.object || []
          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          let seriesData4 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber(arr[0]))
            seriesData2.push(this.$formatNumber(arr[1]))
            seriesData3.push(this.$formatNumber(arr[2]))
            seriesData4.push(this.$formatNumber(arr[3]))
          }

          this.fourCarData.xData = xData
          this.fourCarData.seriesData1 = seriesData1
          this.fourCarData.seriesData2 = seriesData2
          this.fourCarData.seriesData3 = seriesData3
          this.fourCarData.seriesData4 = seriesData4

          charts.barEchartTwo('bar_second', this.fourCarData)
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .width-40 {
    width: 36%;
  }

  .width-20 {
    width: 20%;
  }

  .item_width {
    width: 12px;
  }

  .item_width2 {
    width: calc(100% - 12px);
  }

  .item_bg_warning {
    background-color: #FFB822;
  }

  .item_bg_border {
    background-color: #0A343D;
    border-radius: 4px;
    overflow: hidden;
  }

  .clearLastMb:nth-last-child(1), {
    margin-right: 0 !important;
  }

  .image_size {
    width: calc(100% - 0px);
    height: 48px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }
</style>
